<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>农业大棚信息管理系统登陆界面</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="../js/jquery.js" type=""></script>
    <script src="../js/cloud.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <link rel="stylesheet" href="../css/jigsaw.css">
    <style type="">
        #msg {
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
        }
    </style>

    <script language="javascript" type="">
        $(function(){
            $('.login-wrap').css({'position':'absolute','left':($(window).width()-525)/2});
            $(window).resize(function(){
                $('.login-wrap').css({'position':'absolute','left':($(window).width()-525)/2});
            })
        });
    </script>

</head>

<body style="background-color:#1c77ac; background-image:url(../images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">

<div id="mainBody">
    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>


<div class="logintop">
    <span>欢迎登录后台管理界面平台</span>
    <ul>
        <li><a onclick="window.open('forgot/upgradeMail.html')">更换邮箱</a></li>
        <li><a onclick="window.open('forgot/upgradePassword.html')">忘记密码？</a></li>
    </ul>
</div>

<script src="../js/jigsaw.js" type=""></script>
<div class="loginbody">

    <span class="systemlogo"></span>

    <div class="login-wrap">
        <div class="login-html">
            <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
            <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
            <div class="login-form">
                    <div class="sign-in-htm">
                        <div class="group">
                            <label  class="label">用户名/邮箱</label>
                            <label for="account"></label><input id="account" name="username" value="admin" type="text" class="input">
                        </div>
                        <div class="group">
                            <label class="label">密码</label>
                            <input id="password" type="password" class="input" data-type="password">
                        </div>
                        <div class="group">
                            <div class="container">
                                <div id="captcha" style="position: relative" data-type="password"></div>
                                <div id="msg"></div>
                            </div>
                        </div>
                        <div class="group" style="float: left">
                            <input id="check" type="checkbox" class="check" checked>
                            <label for="check"><span class="icon"></span> 保持登录</label>
                        </div>

                        <div class="foot-lnk" style="float: right">
                            <a onclick="window.open('forgot/upgradePassword.html')">忘记密码?</a>
                        </div>

                        <div class="group">
                            <input type="button" class="button" value="登录" onclick="isRegular()">
                        </div>
                        <div class="hr"></div>

                    </div>

                    <div class="sign-up-htm">
                        <div class="group">
                            <label class="label" id="signUpAccount">用户名</label>
                            <input id="registerAccount" type="text" class="input" value="">
                        </div>
                        <div class="group">
                            <label class="label" id="inputPassword">密码</label>
                            <input id="registerPassword" type="password" class="input" data-type="password" value="">
                        </div>
                        <div class="group">
                            <label class="label" id="confirmPassword">确认密码</label>
                            <input id="registerPassword1" type="password" class="input" data-type="password">
                        </div>
                        <div class="group">
                            <label class="label" style="float: left;" id="notice">邮箱地址</label>
                            <input id="mailAddress" type="text" class="input">
                        </div>

                        <div class="group">
                            <label class="label">验证码</label>
                            <input id="mailCode" type="text" style="width: 70%; float: left" class="input" value=""/>
                            <input type="button" class="button" id="getBtn" style="width: 30%; float: right" value="获取验证码" onclick="setTime()">
                        </div>
                        <div style="height: 2px;margin: 60px 0 8px 0;background: rgba(255,255,255,.2)"></div>
                        <div class="group">
                            <input type="button" class="button" value="注册" onclick="Register();">
                        </div>

                        <div class="foot-lnk">
                            <label for="tab-1">已经注册?</label>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>


<div class="loginbm">版权所有  2021  <a href="" target="_blank">研究开发与实践</a>  XM08-农业大棚信息化</div>
</body>
</html>

<!--登录相关-->
<script>

    let flag = false;

    jigsaw.init(document.getElementById('captcha'), function (){
        flag=true;
        document.getElementById('msg').innerHTML = '验证成功！'
    });

    function isRegular() {
        if(!flag){
            alert("请先完成人机验证！");
            return;
        }
        let account=document.getElementById("account").value;
        let password=document.getElementById("password").value;
        if(account==="" || password===""){
            alert("用户名或密码不能为空");
            return;
        }else{
            login(account, password);
        }
    }


    function login(account, password){
        let url="../Login_ServletAction";
        let message={};
        message.Action="login";
        message.account=account;
        message.password=password;
        $.post(url,message,function (json){
            if(json.ok===200){
                let level=json.userLevel;
                let account=json.account;
                let userId=json.userId;
                let mail=json.mail;
                if(level==0){
                    alert("系统管理员:"+account+"  登录成功！");
                }else if(level==1){
                    alert("普通管理员:"+account+"  登录成功！");
                }else{
                    alert("普通用户:"+account+"  登录成功！");
                }
                // 向另外的页面传递数据
                sessionStorage.setItem("account",account);
                sessionStorage.setItem("level",level);
                sessionStorage.setItem("userId",userId);
                sessionStorage.setItem("mail",mail);
                window.location.href = "../main.html";
            }else if(json.ok===404){
                // 否则登录失败
                alert("用户名或密码错误！");
                window.location.reload();
            }
        });
    }

    // 验证用户名是否合法
    let signUpAccountRegular=false;
    let registerAccount=document.getElementById("registerAccount");
    registerAccount.onblur=function (){
        if(registerAccount.value.length>30){
            document.getElementById("signUpAccount").innerText="用户名          用户名过长！"
            signUpAccountRegular=false;
        } else if(registerAccount.value!==""){
            let url="../Login_ServletAction";
            let account=registerAccount.value;
            let message={};
            message.Action="isExisted";
            message.account=account;
            $.post(url,message,function (json){
                if(json.ok===200){
                    document.getElementById("signUpAccount").innerText="用户名           验证合法";
                    signUpAccountRegular=true;
                } else if(json.ok===400){
                    document.getElementById("signUpAccount").innerText="用户名           该用户名已申请注册，请等待管理员审核！";
                    signUpAccountRegular=false;
                }else if(json.ok===500){
                    document.getElementById("signUpAccount").innerText="用户名           该用户名已被注册，不可重复注册！";
                    signUpAccountRegular=false;
                }
            });
        }else if(registerAccount.value === ""){
            document.getElementById("signUpAccount").innerText="用户名          用户名不可为空！"
            signUpAccountRegular=false;
        }
    }

    // 判断密码是否合法
    let passwordRegular=false;
    let registerPassword=document.getElementById("registerPassword");
    registerPassword.onblur=function (){
        if(registerPassword.value===""){
            document.getElementById("inputPassword").innerText="密码         不可为空！";
            passwordRegular=false
        }else if(registerPassword.value.length>50){
            document.getElementById("inputPassword").innerText="密码         密码过长！";
            passwordRegular=false;
        }else{
            document.getElementById("inputPassword").innerText="密码         验证合法";
            passwordRegular=true;
        }
    }


    // 判断确认密码是否与密码一致
    let registerPassword1=document.getElementById("registerPassword1");
    registerPassword1.oninput=function (){
        let password=document.getElementById("registerPassword").value;
        let password1=registerPassword1.value;
        let notice=document.getElementById("confirmPassword");
        if(password!==password1){
            notice.innerText="确认密码           输入与密码不一致，请确保两次输入的密码一致";
            passwordRegular=false;
        }else{
            notice.innerText="确认密码           确认密码成功";
            passwordRegular=true;
        }
    }

    // 判断邮箱是否合法
    let mailRegular=false;
    // 正则判断是否合法
    let mailAddress=document.getElementById("mailAddress");
    mailAddress.oninput=function (){
        let re = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        let text=mailAddress.value;
        let notice=document.getElementById("notice");
        if(re.test(text)){
            notice.innerText="邮箱地址           验证成功";
            mailRegular=true;
        }else{
            notice.innerText="邮箱地址           验证失败，请输入格式正确的邮箱";
            mailRegular=false;
        }
    }

    // 判断邮箱是否被注册过
    mailAddress.onblur=function (){
        if(mailRegular){
            let url="../Login_ServletAction";
            let mail=mailAddress.value;
            let message={};
            message.Action="isExisted";
            message.mail=mail;
            $.post(url,message,function (json){
               if(json.ok===200){
                   mailRegular=true;
               } else if(json.ok===500){
                   document.getElementById("notice").innerText="邮箱地址           该邮箱已被注册，不可重复注册！";
                   mailRegular=false;
               }else if(json.ok===400){
                   document.getElementById("notice").innerText="邮箱地址           该地址已经被申请，请等待管理员审核！";
                   mailRegular=false;
               }
            });
        }
    }


    // 实现获取验证码的倒计时
    let flagCode=true;
    let backCode;
    let getBtn=document.getElementById("getBtn")
    let countTime=60;
    function setTime(){
        if(countTime===0){
            getBtn.removeAttribute("disabled");
            getBtn.value="获取验证码";
            countTime=60;
            if(countTime===60){
                flagCode=true;
                return;
            }
        }else{
            if(!mailRegular){
                alert("邮箱地址不合法！");
                getBtn.removeAttribute("disabled");
                getBtn.value="获取验证码";
                countTime=60;
                if(countTime===60){
                    flagCode=true;
                    return;
                }
            }
            getBtn.setAttribute("disabled",true);
            getBtn.value="重新发送("+countTime+"s)";
            if(flagCode){
                if(countTime===58){
                    let url="../Login_ServletAction";
                    let message={};
                    message.Action="sendCode";
                    message.mail=document.getElementById("mailAddress").value;
                    message.way="申请注册";
                    $.post(url,message,function (json){
                        if(json.ok===200){
                            backCode=json.code;
                        }else{
                            alert("验证码发送失败!");
                        }
                    });
                    flagCode=false;
                }
            }
            countTime--;
        }

        setTimeout(setTime,1000);
    }

    // 判断验证码是否为空
    let codeRegular=false;
    let codeBtn=document.getElementById("mailCode");
    codeBtn.onblur=function (){
        if(codeBtn.value===""){
            codeBtn.innerText="验证码       不可为空";
            codeRegular=false;
        }else{
            codeBtn.innerText="验证码";
            codeRegular=true;
        }
    }

    function Register() {
        let rAccount = document.getElementById("registerAccount").value;
        let password = document.getElementById("registerPassword").value;
        let mail = document.getElementById("mailAddress").value;
        let code = document.getElementById("mailCode").value;
        let url = "../Login_ServletAction";
        let message = {};
        if (!passwordRegular || !signUpAccountRegular || !mailRegular || !codeRegular || !codeRegular) {
            alert("请确保所有信息填写完整且正确！");
            return;
        }
        message.Action = "register";
        message.account = rAccount;
        message.password = password;
        message.mail = mail;
        message.code = code;
        if (!flagCode) {
            if (code === backCode) {
                $.post(url, message, function (json) {
                    if (json.ok === 200) {
                        alert("申请注册成功! 请等待管理员批准");
                    } else {
                        alert("申请注册失败!");
                    }
                    window.location.reload();
                });
            }else{
                alert("验证码错误!");
            }
        }else{
            alert("验证码已过期!");
        }
    }
</script>